﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta charset="utf-8">
    <title>Hero</title>
</head>
<body>

    <div id="hero">
        <div data-v-6cecc3ed="" id="head">
            <div data-v-6cecc3ed="" class="head">
                <div data-v-6cecc3ed="" class="head-close">
                    <img data-v-6cecc3ed="" src="http://0d077ef9e74d8.cdn.sohucs.com/qoZ0d8y_png">
                </div>
                <span data-v-6cecc3ed="" class="title">英雄榜</span>
            </div>
        </div>
        <div class="order">
            <ul data-v-41eac656="">
                <li data-v-41eac656="">
                    <div class="order-img">
                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoZ0ttU_png" />
                        <img src="" style="display: none;">
                    </div>
                    <div class="order-avator">
                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoYjsdT_jpg">
                    </div>
                    <div class="order-name">杜晓波</div>
                    <div class="order-money">50元</div>
                </li>
                <li data-v-41eac656="">
                    <div class="order-img">

                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoZ0SST_png">

                    </div>
                    <div class="order-avator">
                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoYjsdT_jpg">
                    </div>
                    <div class="order-name">杜晓波</div>
                    <div class="order-money">50元</div>
                </li>
                <li data-v-41eac656="">
                    <div class="order-img">

                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoZ1dMP_png">
                    </div> <div class="order-avator">
                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoYjsdT_jpg">
                    </div> <div class="order-name">杜晓波</div>
                    <div class="order-money">50元</div>
                </li>
                <li data-v-41eac656="">
                    <div class="order-img">

                    </div>
                    <div class="order-avator">
                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoYjsdT_jpg">
                    </div>
                    <div class="order-name">杜晓波</div>
                    <div class="order-money">50元</div>
                </li>
                <li data-v-41eac656="">
                    <div class="order-img">

                    </div> <div class="order-avator">
                        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qoYjsdT_jpg">
                    </div>
                    <div class="order-name">杜晓波</div>
                    <div class="order-money">50元</div>
                </li>
            </ul>

        </div>
    </div>

    <style>
        body, html {
            font-size: 20px;
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        body {
            background: #eee;
        }

        body, html {
            font-size: 20px;
            margin: 0;
            padding: 0;
        }

        body, html {
            font-size: 20px;
            margin: 0;
            padding: 0;
        }

        #head {
            padding-top: 2.6rem;
            margin-bottom: 1px;
        }

        .head {
            height: 2.6rem;
            background: #fff;
            border-bottom: 1px solid #d7dbdd;
            text-align: center;
            line-height: 2.6rem;
            font-size: .9rem;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 10;
        }

            .head .head-close {
                width: .55rem;
                height: .9rem;
                position: absolute;
                margin-left: 1rem;
                margin-top: .875rem;
            }

                .head .head-close img {
                    display: block;
                    width: 100%;
                }

            .head .title {
                width: 10rem;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            background: #fff;
        }

        ul, menu, dir {
            display: block;
            list-style-type: disc;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 40px;
        }

            ul li {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                padding: .5rem;
                border-bottom: 1px solid #ebedee;
            }

                ul li .order-img {
                    width: 2.275rem;
                    text-align: center;
                }

                    ul li .order-img img {
                        display: block;
                        width: 1.1rem;
                        height: .625rem;
                        margin: 0 auto;
                    }

                ul li .order-avator img {
                    display: block;
                    width: 2.4rem;
                    height: 2.4rem;
                    border-radius: 50%;
                }

                ul li .order-name {
                    font-size: .7rem;
                    color: #838383;
                    margin-left: .5rem;
                }

                ul li .order-money {
                    -ms-flex: 1;
                    flex: 1;
                    text-align: right;
                    padding-right: .5rem;
                    color: #262626;
                    font-size: .7rem;
                }

        html, body {
            height: 100%;
        }

        html {
            /*font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;*/
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            font-size: 100%;
        }

        body {
            font-size: 14px;
            line-height: 1.5;
            color: #333333;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            background: #fff;
            background: #f2f2f2;
        }

        html, body, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, form, label, legend, figure, blockquote {
            margin: 0;
            padding: 0;
        }

        ul, ol, li {
            list-style: none;
        }

        p {
            zoom: 1;
        }

        em, cite, i {
            font-style: normal;
        }

        ins {
            text-decoration: none;
        }

        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            color: #333;
        }

            a, a:hover, a:active, a:focus, button, input {
                outline: none;
            }

        img {
            border: 0;
            -ms-interpolation-mode: bicubic;
            vertical-align: middle;
            max-width: 100%;
        }
    </style>
</body>
</html>
